<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SCB First to Enjoy</title>
	<link rel="stylesheet" href="css/global.css" media="all" />
	<link rel="stylesheet" href="css/style.css" media="all" />
	<script src="js/jquery.min.js"></script>
    </head>
    <body>
	<div id="fb-root"></div>
	<script type="text/javascript">
	    window.fbAsyncInit = function() {
		FB.init({
		    appId: '{$fb_app_id}',
		    status: true,
		    cookie: true,
		    xfbml: true
		});
		FB.Canvas.setSize({width: 810, height: 834});
	    };
	    (function() {
		var e = document.createElement('script'); e.async = true;
		e.src = document.location.protocol +
		'//connect.facebook.net/en_US/all.js';
		document.getElementById('fb-root').appendChild(e);
	    }());
	</script>
	
	<div id="wrapper" class="wrapper-question">
	    <div id="question-detail">
		<img src="{$site_url}assets/images/questions/{$question_id}/{$question_img}#" alt="{$question_remark}" />
	    </div>
	    
	    <div id="question-answer">
		{loop="answer"}
		<img src="{$site_url}assets/images/questions/{$question_id}/{$value.img}#" alt="{$value.title}" class="img_link answer-img" rel="{$value.id}"  />
		{/loop}
	    </div>
	    
            <a href="javascript:void(0);" id="form-bt">&nbsp;</a>
	    
	    <div class="hidden">
		
		<form id="form-info" method="post" action="{$site_url}answer.html">
		    <input type="hidden" name="name" value="{$name}" />
		    <input type="hidden" name="tel" value="{$tel}" />
		    <input type="hidden" name="credit" value="{$credit}" />
		    
		    <input type="hidden" name="prize_id" value="{$prize_id}" />
		    <input type="hidden" name="question_id" value="{$question_id}" />
		    <input type="hidden" name="answer_id" value="" />
		    
		    <input type="hidden" name="round_id" value="{$round_id}" />
		    <input type="hidden" name="round_date" value="{$round_date}" />
		    <input type="hidden" name="round_time" value="{$round_time}" />
		</form>
		
		<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
		<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" media="all" />
		<script type="text/javascript">
		    $(document).ready(function() {
			$('.acolorbox').fancybox({
			    'closeBtn':false,
			    'autoDimensions' : false,
			    'autoScale' : false,
			    'closeClick' : false,
			    'helpers' :  {
				overlay : {
				    closeClick: false
				}
			    }
			});
			
			$('.light-box-close-bt').live('click',function(){
			   $.fancybox.close();
			});
			
			$('.answer-img').live('click', function(){
			    $('.answer-img').removeClass('select');
			    $(this).addClass('select');
			    $('input[name="answer_id"]').val($(this).attr('rel'));
			});
			
			$('#form-bt').live('click', function(){
			    if($('input[name="answer_id"]').val()==''){
				$('#form-error-box').click();
			    }else{
				$('#form-info').submit();
			    }
			});
		    });
		</script>
		
		<!-- light box : form error -->
		<a href="#form-error" class="acolorbox" id="form-error-box">Click!!</a>
		<div id="form-error">
		    <img src="images/close-bt.png" class="light-box-close-bt" alt="close" />
		    
		    <div id="form-error-msg" style="padding: 100px 50px 40px 50px; text-align:center;">กรุณาเลือกคำตอบค่ะ</div>
		</div>
		<!-- light box : form end -->
	    </div>
        </div>
    </body>
</html>